<template>

    <!-- 肥料部级备案数据 -->

    <div class="CcadFertBjba">
        <!-- 选择器 -->
        <el-row class="selectInfo">
            <!-- 类别选择器 -->
            <el-col :span="7">
                <h5 class="textStyle">产品名称</h5>
                <el-select v-model="selectName" placeholder="请选择产品名称" clearable @change="startSearch">
                    <el-option v-for="item in nameCategory" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-col>

            <el-col :span="7">
                <h5 class="textStyle">通用形态</h5>
                <el-select v-model="selectShape" placeholder="请选择通用形态" clearable @change="startSearch">
                    <el-option v-for="item in shapeCategory" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="2">
                <el-button type="primary" @click="startSearch">开始搜索</el-button>
            </el-col>
        </el-row>
        <!-- 表格 -->
        <el-table :data="tableData" style="width: 100%" stripe class="center-table" height="745">
            <el-table-column label="序号" prop="num" sortable width="80" align="center">
            </el-table-column>
            <el-table-column label="企业名称" prop="entname" sortable width="320" align="center">
            </el-table-column>
            <el-table-column label="产品通用名称" prop="genproname" width="160" align="center">
            </el-table-column>
            <el-table-column label="产品形态" prop="promodal" sortable width="200" align="center">
            </el-table-column>
            <el-table-column label="技术指标" prop="techindex" sortable width="370" align="center">
            </el-table-column>
            <el-table-column label="备案号" prop="recno" width="240" align="center">
            </el-table-column>
            <el-table-column label="备案日期" prop="rectime" width="250" align="center" show-overflow-tooltip>
            </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <div class="block">
            <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="PageSize"
                layout="total, prev, pager, next , jumper" :total="tableLength" :pager-count="7" background
                :hide-on-single-page="false">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { getDataInterface, getCategory, getDataSearch } from '../../global'
export default {
    name: 'CcadFertBjba',
    data() {
        return {
            allDataSubUrl: '/CcadFertBjba/findByPage',
            nameCategoryUrl:'/CcadFertBjba/category_tymc',
            shapeCategoryUrl:'/CcadFertBjba/category_cpxt',
            searchUrl:'/CcadFertBjba/findByPageWithParam',
            // 从后端获取表格中数据
            tableData: [],
            // 所有数据的长度,还未从后端获取
            tableLength: -1,
            // 查找的关键字
            search: '',
            // 当前所在的页码
            currentPage: 1,
            // 每页显示的数据条数
            PageSize: 16,
            token: '',
            nameCategory: [],
            shapeCategory: [],
            selectName: '',
            selectShape: '',
            searchInput: '',
        }
    },
    methods: {
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            // 改变默认的页数
            this.currentPage = val
            var dataPromise = {}
            if (this.selectName.length === 0 && this.selectShape.length === 0){
                dataPromise = getDataInterface(this.allDataSubUrl, this.currentPage, this.PageSize)
            }else {
                dataPromise = getDataSearch(this.searchUrl, this.currentPage, this.PageSize,this.selectName,this.selectShape)
            }
            dataPromise.then(res => {
                this.tableData = res.data
                this.tableLength = res.total
            })
        },
        getTableData() {
            const dataPromise = getDataInterface(this.allDataSubUrl, this.currentPage, this.PageSize)
            // data就是传入resolve的response.data
            dataPromise.then(res => {
                this.tableData = res.data
                this.tableLength = res.total
            })
        },
        startSearch(){
            const dataPromise = getDataSearch(this.searchUrl, this.currentPage, this.PageSize,this.selectName,this.selectShape)
            dataPromise.then(res => {
                this.tableData = res.data
                this.tableLength = res.total
            })
        }
    },
    mounted() {
        // 获取所有数据
        this.getTableData()

        // 获取产品名称类别
        const nameCategoryPromise = getCategory(this.nameCategoryUrl)
        nameCategoryPromise.then(resp => {
            this.nameCategory = resp.map(item => {
                return { value: item, label: item }
            })
            console.log(this.nameCategory)
        })

        // 获取所有类别数据
        const shapeCategoryPromise = getCategory(this.shapeCategoryUrl)
        shapeCategoryPromise.then(resp => {
            this.shapeCategory = resp.map(item => {
                return { value: item, label: item }
            })
            console.log(this.shapeCategory)
        })
    }
}
</script>

<style scoprd lang="less">
.CcadFertBjba {
    .el-col {
        display: flex;
    }

    .selectInfo {
        padding-bottom: 20px;
    }

    .inputStyle {
        width: 350px;
    }

    .textStyle {
        line-height: 40px;
        padding-right: 20px;
    }

    .block {
        margin-top: 15px;
        text-align: center;
    }
}
</style>